import React from 'react';

const R = require('ramda');
import {connect} from 'dva';
import {Form, Button, Modal, Tabs, message} from 'antd';
import AccountInfos from './AccountInfos';
import CostList from './CostList';
import Submit from './Submit';
import Constants from '../../utils/Constants';
const TabPane = Tabs.TabPane;


export default connect(({customerManage, orderManage, settlement, customs, logisticsSupplier}) => ({customerManage, orderManage, settlement, customs, logisticsSupplier}))(Form.create({wrappedComponentRef: true})(class CustomerDetail extends React.Component {

        constructor(props) {
            super(props);
            this.state = {
                open: false,
                disabled: false,
                stObj: '',
                suppilerId: '',
                transferamount: '',
                tabActiveKey: "1",
                statementFee: [],
                cstId: ''
            };
        }


        handleOpen = (cstId) => {
            this.setState({ open: true, cstId });
        }



        handleCancel = (flag) => {
            if (this.accountInfos) this.accountInfos.handleResetFields();
            if (this.costList) this.costList.handleResetFields();
            if (this.submit) this.submit.handleResetFields();
            if(this.props.handleSearch) this.props.handleSearch();
            this.setState({ tabActiveKey: "1", open: false });
        }


        handleChangeTabe = (key) => {
            this.setState({tabActiveKey: key})
        }


        handleBack = () => {
            if(this.state.tabActiveKey === "3" && this.state.stObj != "2"){
                if (this.submit) this.submit.handleResetFields();
                this.submit.props.form.setFieldsValue({ accopenbank: "", accno: "" })
            }
            this.setState({tabActiveKey: (parseInt(this.state.tabActiveKey) - 1) + ""});
        }


        handleNext = () => {
            if (this.state.tabActiveKey === "1" && this.accountInfos.handleConfirm()) {
                this.props.dispatch({
                    type: 'settlement/queryStatetemntDetailForPlatform',
                    payload: {
                        cstid: this.state.cstId,
                        stObjId: this.state.suppilerId
                    }
                });

                if(this.state.stObj === "1"){
                    this.props.dispatch({
                        type: 'logisticsSupplier/getPayeeListForPage',
                        payload: {
                            supplierid: this.state.suppilerId,
                            page: Constants.DEFAULT_PAGE
                        }
                    });
                }else if(this.state.stObj === "2"){
                    this.props.dispatch({
                        type: 'customs/getById',
                        payload: {
                            id: this.state.suppilerId
                        }
                    });
                }
                this.setState({tabActiveKey: (parseInt(this.state.tabActiveKey) + 1) + ""});
            }

            if (this.state.tabActiveKey === "2") {
                let statementFee = this.costList.returnFeeList();
                if (R.isNil(statementFee) || R.isEmpty(statementFee)) {
                    message.info("请选择费用结算");
                    return;
                }

                let account = null;
                if (statementFee) {
                    for (let i = 0; i < statementFee.length; i++) {
                        account += statementFee[i].costAmt;
                    }
                }
                this.setState({ transferamount: account, statementFee: statementFee, tabActiveKey: (parseInt(this.state.tabActiveKey) + 1) + "" });
            }

        }


        setStatementType = (stObj, id) => {
            this.setState({ suppilerId: id, stObj: stObj });
        }


        addStatement = () => {
            if (this.submit.handleConfirm()) {
                this.handleCancel();
            }
        }


        render() {

            let footer = [];

            footer.push(<Button key="back" size="large" disabled={this.state.disabled} onClick={this.handleBack.bind(this)}
                                style={{display: this.state.tabActiveKey === "1" ? "none" : "inline-block"}}>上一步</Button>);

            if (this.state.tabActiveKey === "2") {
                footer.push(<Button key="next" size="large"
                                    onClick={this.handleNext.bind(this)}
                                    style={{display: this.state.tabActiveKey === "3" ? "none" : "inline-block"}}>下一步</Button>);
            } else {
                footer.push(<Button key="next" size="large" disabled={this.state.disabled}
                                    onClick={this.handleNext.bind(this)}
                                    style={{display: this.state.tabActiveKey === "3" ? "none" : "inline-block"}}>下一步</Button>);

            }

            if (this.state.tabActiveKey === "3") {
                footer.push(<Button key="submit" size="large" disabled={this.state.disabled}
                                    onClick={this.addStatement.bind(this)} style={{display: "inline-block"}}>提交申请</Button>);
            }

            footer.push(<Button key="cancel" size="large" disabled={this.state.disabled}
                                onClick={this.handleCancel.bind(this, true)}>取消</Button>);


            let widths = {
                "1": 900,
                "2": 1000,
                "3": 1000,
                "4": 900,
                "5": 900
            };


            return (
                <Modal maskClosable={false} footer={footer} visible={this.state.open}
                       title={"新增结算单"} width={widths[this.state.tabActiveKey]} wrapClassName="vertical-center-modal"
                       onCancel={this.handleCancel}>
                    <Tabs activeKey={this.state.tabActiveKey} tabPosition={'left'}
                          onChange={this.handleChangeTabe.bind(this)}>
                        <TabPane tab="账户信息" key="1" disabled={!this.state.disabled}>{<AccountInfos
                            wrappedComponentRef={(inst) => this.accountInfos = inst}
                            dispatch={this.props.dispatch}
                            customerManage={this.props.customerManage}
                            setStatementType={this.setStatementType}
                            />}
                        </TabPane>

                        <TabPane tab="结算费用" key="2" disabled={!this.state.disabled}>{<CostList
                            wrappedComponentRef={(inst) => this.costList = inst}
                            customerManage={this.props.customerManage}
                            orderManage={this.props.orderManage}
                            dataSource={this.props.settlement}
                            cstId={this.state.cstId}
                            suppilerId={this.state.suppilerId}
                            dispatch={this.props.dispatch}
                            />}
                        </TabPane>

                        <TabPane tab="转账信息" key="3" disabled={!this.state.disabled}>{<Submit
                            wrappedComponentRef={(inst) => this.submit = inst}
                            customerManage={this.props.customerManage}
                            suppilerId={this.state.suppilerId}
                            stObj={this.state.stObj}
                            cstId={this.state.cstId}
                            statementFee={this.state.statementFee}
                            dispatch={this.props.dispatch}
                            transferamount={this.state.transferamount}
                            customs={this.props.customs}
                            logisticsSupplier={this.props.logisticsSupplier}
                            handleSearch={this.props.handleSearch}
                        />}
                        </TabPane>
                    </Tabs>
                </Modal>
            );
        }
    })
)


